import { SvgIcon } from '@/components/icon';
import useWindowWidth from '@/hooks/event/use-window-width';
import { Alert, Drawer, Spin } from 'antd';
import { memo, useEffect, useRef, useState } from 'react';
import './file-viewer.scss';
import FilePreviewer from './FilePreviewer';

interface Props {
  previewUrl: string;
  open: boolean;
  onClose: () => void;
  loading: boolean;
  setLoading: (loading: boolean) => void;
  fileName: string;
}

const FilePreviewDrawer = ({ previewUrl, open, loading, onClose, setLoading, fileName }: Props) => {
  const { isPc } = useWindowWidth();
  const [isIframeError, setIsIframeError] = useState(false);

  const onIframeError = () => {
    setIsIframeError(true);
  };

  const onIframeLoad = (event: React.SyntheticEvent<HTMLIFrameElement, Event>) => {
    const iframe = event.target;
    try {
      const doc = iframe?.contentDocument || iframe.contentWindow?.document;
      if (!doc.body.innerHTML || doc.body.innerHTML.includes('500 Internal Server Error')) {
        console.error('Server returned a 500 error');
        setIsIframeError(true);
      } else {
        const style = iframe.contentDocument.createElement('style');
        style.textContent = `
          /* 纵向滚动条 */
         ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #f5f5f5;
          }
          ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba (0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #f5f5f5;
          }
          ::-webkit-scrollbar-thumb {
            cursor: pointer;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba (0, 0, 0, 0.3);
            background-color: #bbbbbb;
          }
        `;
        iframe.contentDocument.head.appendChild(style);
      }
    } catch (e) {
      console.error(e);
      setIsIframeError(true);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!open) {
      setLoading(false);
    }
  }, [open]);

  return (
    <Drawer
      destroyOnHidden
      width={isPc ? '50%' : '100%'}
      closeIcon={isPc ? undefined : <SvgIcon icon="ic-back" size={24} />}
      open={open}
      onClose={onClose}
      className="file-viewer-drawer"
      style={{ padding: '0px' }}
    >
      {/* <div className="h-full w-full">
        {open && (
          <iframe
            key={previewUrl}
            src={previewUrl}
            style={{ width: '100%', height: '100%', border: 'none' }}
            onLoad={onIframeLoad}
            onError={onIframeError}
          />
        )}

        {(loading || isIframeError) && (
          <div
            style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
            }}
            className="pointer-events-none absolute top-0 z-0"
          >
            <span>{loading ? <Spin /> : '加载失败'}</span>
          </div>
        )}
      </div> */}
      <FilePreviewer
        previewUrl={previewUrl}
        loading={loading}
        fileName={fileName}
        setLoading={setLoading}
      />
    </Drawer>
  );
};

export default memo(FilePreviewDrawer);
